<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCU联动任务</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <style>
        .linkage-container {
            padding: 20px;
            background-color: #f5f7fa;
            min-height: 100vh;
        }

        .section-card {
            background: #fff;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }

        .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .card-body {
            padding: 20px;
        }

        .condition-block {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 15px;
            margin-bottom: 15px;
        }

        .condition-title {
            font-size: 14px;
            color: #606266;
            margin-bottom: 10px;
        }

        .result-block {
            background-color: #f5f7fa;
            border-radius: 4px;
            padding: 15px;
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div id="mcu-linkage">
        <div class="linkage-container">
            <el-tabs v-model="activeTab" type="border-card">
                <!-- 任务列表和配置 -->
                <el-tab-pane label="任务列表和配置" name="taskList">
                    <el-card class="section-card">
                        <div slot="header" class="card-header">
                            <span>联动任务配置</span>
                            <el-button type="primary" size="small" @click="handleAddTask">
                                <i class='bx bx-plus'></i> 新增联动
                            </el-button>
                        </div>
                        <div class="card-body">
                            <!-- 任务列表 -->
                            <el-table :data="tasks" style="width: 100%">
                                <el-table-column prop="id" label="任务ID" width="100"></el-table-column>
                                <el-table-column label="启动信息" width="300">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-tag size="small">{{scope.row.triggerSensor}}</el-tag>
                                            <el-tag size="small" type="warning" style="margin-left: 5px">
                                                {{scope.row.triggerCondition}}
                                            </el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column label="联动信息" width="300">
                                    <template slot-scope="scope">
                                        <div>
                                            <el-tag size="small" type="success">{{scope.row.actionSensor}}</el-tag>
                                            <el-tag size="small" type="info" style="margin-left: 5px">
                                                {{scope.row.actionCommand}}
                                            </el-tag>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="status" label="状态" width="100">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.status === '启用' ? 'success' : 'info'">
                                            {{scope.row.status}}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="200">
                                    <template slot-scope="scope">
                                        <el-button-group>
                                            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                        </el-button-group>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                </el-tab-pane>

                <!-- 任务监控 -->
                <el-tab-pane label="任务监控" name="taskMonitor">
                    <el-card class="section-card">
                        <div slot="header" class="card-header">
                            <span>联动任务执行详情</span>
                            <el-button-group>
                                <el-button size="small" type="primary" @click="refreshMonitor">
                                    <i class='bx bx-refresh'></i> 刷新
                                </el-button>
                                <el-button size="small" @click="clearHistory">
                                    <i class='bx bx-trash'></i> 清空历史
                                </el-button>
                            </el-button-group>
                        </div>
                        <div class="card-body">
                            <el-table :data="taskExecutions" style="width: 100%">
                                <el-table-column prop="taskId" label="联动任务ID" width="120"></el-table-column>
                                <el-table-column prop="triggerInfo" label="触发信息" width="250"></el-table-column>
                                <el-table-column prop="actionInfo" label="执行动作" width="250"></el-table-column>
                                <el-table-column prop="executeTime" label="执行时间" width="180"></el-table-column>
                                <el-table-column prop="result" label="执行结果" width="100">
                                    <template slot-scope="scope">
                                        <el-tag :type="scope.row.result === '成功' ? 'success' : 'danger'">
                                            {{scope.row.result}}
                                        </el-tag>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="details" label="详细信息"></el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>

            <!-- 添加/编辑联动任务弹窗 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%">
                <el-form :model="taskForm" label-width="100px">
                    <div class="condition-block">
                        <div class="condition-title">启动条件</div>
                        <el-form-item label="触发传感器">
                            <el-select v-model="taskForm.triggerSensor" placeholder="请选择传感器">
                                <el-option label="温度传感器" value="temperature"></el-option>
                                <el-option label="湿度传感器" value="humidity"></el-option>
                                <el-option label="CO2传感器" value="co2"></el-option>
                                <el-option label="光照传感器" value="light"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="触发条件">
                            <el-select v-model="taskForm.triggerCondition" placeholder="请选择条件">
                                <el-option label="大于阈值" value="greater"></el-option>
                                <el-option label="小于阈值" value="less"></el-option>
                                <el-option label="等于阈值" value="equal"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="阈值">
                            <el-input-number v-model="taskForm.threshold" :min="0" :max="100"></el-input-number>
                        </el-form-item>
                    </div>

                    <div class="condition-block">
                        <div class="condition-title">联动结果</div>
                        <el-form-item label="控制设备">
                            <el-select v-model="taskForm.actionSensor" placeholder="请选择设备">
                                <el-option label="空调" value="ac"></el-option>
                                <el-option label="新风系统" value="ventilation"></el-option>
                                <el-option label="照明" value="light"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="控制命令">
                            <el-select v-model="taskForm.actionCommand" placeholder="请选择命令">
                                <el-option label="开启" value="on"></el-option>
                                <el-option label="关闭" value="off"></el-option>
                                <el-option label="调节" value="adjust"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submitTask">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#mcu-linkage',
            data() {
                return {
                    activeTab: 'taskList',
                    dialogVisible: false,
                    dialogTitle: '新增联动任务',
                    taskForm: {
                        triggerSensor: '',
                        triggerCondition: '',
                        threshold: 0,
                        actionSensor: '',
                        actionCommand: ''
                    },
                    tasks: [
                        {
                            id: 1,
                            triggerSensor: '温度传感器',
                            triggerCondition: '大于28°C',
                            actionSensor: '空调',
                            actionCommand: '开启',
                            status: '启用'
                        },
                        {
                            id: 2,
                            triggerSensor: 'CO2传感器',
                            triggerCondition: '大于1000ppm',
                            actionSensor: '新风系统',
                            actionCommand: '开启',
                            status: '启用'
                        }
                    ],
                    taskExecutions: [
                        {
                            taskId: 1,
                            triggerInfo: '温度传感器 > 28°C',
                            actionInfo: '空调开启',
                            executeTime: '2025-02-20 17:15:00',
                            result: '成功',
                            details: '当前温度29°C，已开启空调'
                        },
                        {
                            taskId: 2,
                            triggerInfo: 'CO2 > 1000ppm',
                            actionInfo: '新风系统开启',
                            executeTime: '2025-02-20 17:10:00',
                            result: '成功',
                            details: '当前CO2浓度1200ppm，已开启新风系统'
                        }
                    ]
                }
            },
            methods: {
                handleAddTask() {
                    this.dialogTitle = '新增联动任务';
                    this.dialogVisible = true;
                },
                handleEdit(task) {
                    this.dialogTitle = '编辑联动任务';
                    this.dialogVisible = true;
                    // 这里需要设置taskForm的值
                },
                handleDelete(task) {
                    this.$confirm('确认删除该联动任务吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        // 这里添加删除逻辑
                        this.$message.success('删除成功');
                    }).catch(() => {});
                },
                submitTask() {
                    // 这里添加提交任务的逻辑
                    this.dialogVisible = false;
                    this.$message.success('保存成功');
                },
                refreshMonitor() {
                    this.$message({
                        message: '正在刷新数据...',
                        type: 'info'
                    });
                },
                clearHistory() {
                    this.$confirm('确认清空历史记录吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.taskExecutions = [];
                        this.$message.success('清空成功');
                    }).catch(() => {});
                }
            }
        })
    </script>
</body>
</html>